<template>
  <div class="box">
    <div class="container-fluid">
      <div class="common_title">
        文章编辑
      </div>
      <div class="container-fluid common_con">
        <form class="form-horizontal article_form" id="form" ref="form">
          <div class="form-group">
            <label for="inputTitle" class="col-sm-2 control-label"
              >文章标题：</label
            >
            <div class="col-sm-10">
              <input
                type="text"
                name="title"
                class="form-control title"
                id="inputTitle"
                v-model="article.title"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCover" class="col-sm-2 control-label"
              >文章封面：</label
            >
            <div class="col-sm-10">
              <img :src="article.cover" class="article_cover" />
              <input
                name="cover"
                type="file"
                id="inputCover"
                ref="file"
                @change="changePic"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCategory" class="col-sm-2 control-label"
              >文章类别：</label
            >
            <div class="col-sm-4 col-lg-2">
              <select
                class="form-control category"
                name="categoryId"
                v-model="article.categoryId"
              >
                <option
                  :value="item.id"
                  v-for="item in categoryList"
                  :key="item.id"
                  >{{ item.name }}</option
                >
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">发布时间：</label>
            <div class="col-sm-4">
              <!-- 准备日期插件 -->
              <el-date-picker
                v-model="article.date"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
                <!-- {{ article.date }} -->
              </el-date-picker>
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"
              >文章内容：</label
            >
            <div class="col-sm-10">
              <!-- 准备富文本插件 -->
              <div id="editor">
                <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button
                type="submit"
                class="btn btn-success btn-release"
                @click.prevent="doRelease('已发布')"
              >
                发布
              </button>
              <button
                type="submit"
                class="btn btn-default btn-draft"
                @click.prevent="doRelease('草稿')"
              >
                存为草稿
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
// 导入接口
import { getArticleCategory, addArticle } from './article.js'
// 导入 wangeditor 富文本编辑器
import E from 'wangeditor'
export default {
  name: 'articleRelease',
  filters: {
    formDate: function (value) {
      return value
    }
  },
  data () {
    return {
      categoryList: [], // 分类列表
      article: {
        title: '请输入标题',
        cover: '',
        categoryId: 1,
        date: null,
        content: '请输入文章内容'
      },
      editor: null // 富文本
    }
  },
  methods: {
    newDate () {
      let Datetime = new Date()
      let Y = Datetime.getFullYear() + '-'
      let M =
        (Datetime.getMonth() + 1 < 10
          ? '0' + (Datetime.getMonth() + 1)
          : Datetime.getMonth() + 1) + '-'
      let D =
        Datetime.getDate() < 10
          ? '0' + Datetime.getDate()
          : +Datetime.getDate() + ' '
      let Time = Y + M + D
      return Time
    },
    // 图片预览
    changePic () {
      // 获取图片文件
      try {
        let file = this.$refs.file.files[0]
        // 生成blob路径
        this.article.cover = URL.createObjectURL(file)
      } catch (error) {
        console.log(error)
      }
    },
    // 发布或存为草稿点击事件
    async doRelease (state) {
      // 获取数据
      let fd = new FormData(this.$refs.form)
      // 追加表单中为获取到的数据
      fd.append('date', this.article.date)
      fd.append('content', this.editor.txt.html())
      fd.append('state', state)
      // 发请求
      let res = await addArticle(fd)
      console.log(res)
      // 弹窗提示
      this.$message(state + '成功')
      // 跳转列表页
      this.$router.push('/articleList')
    }
  },
  async created () {
    let res = await getArticleCategory()
    this.categoryList = res.data.data
    this.article.date = this.newDate()
    console.log(this.article.date);
  },
  // 生命周期钩子  mounted  DOM 完成渲染
  mounted () {
    this.editor = new E('#editor')
    this.editor.create()
    this.editor.txt.html(this.article.content)
  }
}
</script>

<style></style>
